/*
    move    运动函数
        @param  object  element 要执行运动函数的标签对象
        @param  object  object  要执行运动的css属性 和 最终数值
        @param  function    callback    运动结束执行的回调函数
                                        默认值是空函数
*/ 
function move( element , object , callback = function(){}){
    // 定义变量 存储 定时器个数 初始值是 0
    let num = 0 ;

    // 循环遍历 参数2对象 
    // 使用 for...in 循环 使用 let 定义变量 
    for( let type in object ){
        // type 是 参数2对象的属性 也就是 要运动的css样式的属性
        // object[type] 是 参数2对象的属性值 也就是 要运动的css样式的 最终数值

        // 变量累加1 证明有一个属性生成了一个对应的 定时器 
        num++ ; 

        // 获取 初始值 兼容透明度
        let startVal = type === 'opacity' ? window.getComputedStyle( element )[type] * 100 : parseInt( window.getComputedStyle( element )[type] ) ;

        // 获取 最终值 兼容透明度
        let endVal = type === 'opacity' ? object[type] * 100 : object[type] ;

        // 触发定时器 使用 变量 存储 定时器编号 
        let time = setInterval( function(){
            // 计算 步长值 
            let step = ( endVal - startVal ) / 10 ;

            // 步长取整
            step = step > 0 ? Math.ceil( step ) : Math.floor( step );
            // console.log(step);

            // 初始值累加步长值
            startVal += step ;

            // 将新的步长值 赋值给 标签对象的css样式 兼容 透明度
            element.style[type] = type === 'opacity' ? startVal / 100 : startVal + 'px' ;

            // 判断 如果 初始值 累加至 最终值 
            if( startVal === endVal ){
                // 清除定时器
                clearInterval( time );

                // 变量 累减1 也就是 少了一个执行的定时器
                num-- ;
                console.log(num);
                // 当 num 累加至 0 时 所有执行的定时器都清除了 
                if( num === 0 ){
                    // 触发执行回调函数
                    callback() ;
                }
            }

        } , 25 )
    }
}